//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react';
import { history } from 'umi';
import {
  IndexBar,
  NavBar,
  DropdownMenu,
  Cell,
  Switch,
  Divider,
} from 'react-vant';
import './index.less';
import '@/pages/golobo.less';
import 'lib-flexible';
// import maoyan from './img/猫眼Logo.png';
import bxqyys from '../../static/56898.png';
import { Tabs } from 'antd-mobile';
import { Search, WapNav, Location, Arrow, ArrowDown } from '@react-vant/icons';
import { Card, Toast, Button } from 'antd-mobile';
import { DemoBlock } from 'demos';
import { AntOutline, RightOutline } from 'antd-mobile-icons';

import styles from './demo1.less';

import './style.css';
import lalabi from './images/拉拉笔.gif';
export default function index() {
  // const onClick = () => {
  //     Toast.show('优质观影区')
  // }

  // const onHeaderClick = () => {
  //     Toast.show('点击了卡片Header区域')
  // }

  // const onBodyClick = () => {
  //     Toast.show('点击了卡片Body区域')
  // }
  // const [value, setValue] = useState<Record<string, string | number>>({});

  //点击跳转电影页面
  //   let vb = () => {
  //     history.push('/details');
  //   };

  //   点击跳转电影页面
  // let seats = () => {
  //   history.push('/seat');
  // };

  //跳转影厅页面
  let cinemasss = () => {
    history.push('/cinema');
  };
  // 从localStorage获取数据并填充UI  (可以忽略)
  function populateUI() {
    const movieSelect = document.getElementById('movie');
    const seats = document.querySelectorAll('.row .seat:not(.occupied)');
    // ???
    const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));
    if (selectedSeats != null && selectedSeats.length > 0) {
      seats.forEach((seat, index) => {
        if (selectedSeats.indexOf(index) > -1) {
          seat.classList.add('selected'); // ???
        }
      });
    }
    const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');
    if (selectedMovieIndex !== null) {
      movieSelect.selectedIndex = selectedMovieIndex;
    }
  }
  // 保存选中的电影索引和价格到localStorage
  function setMovieData(movieIndex, moviePrice) {
    localStorage.setItem('selectedMovieIndex', movieIndex);
    localStorage.setItem('selectedMoviePrice', moviePrice);
  }
  // 更新总选中座位数和价钱
  function updateSelectedCount() {
    const movieSelect = document.getElementById('movie');

    let ticketPrice = +movieSelect.value; // 45
    const seats = document.querySelectorAll('.row .seat:not(.occupied)');
    // 获取所有选中的座位
    const selectedSeats = document.querySelectorAll('.row .seat.selected');
    // 在可选定的座位中,获取选中座位的索引
    const seatsIndex = [...selectedSeats].map((seat) =>
      [...seats].indexOf(seat),
    );
    // 存储座位
    localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));
    const selectedSeatsCount = selectedSeats.length;

    count.innerText = selectedSeatsCount;
    totalPrice.innerText = selectedSeatsCount * ticketPrice;

    setMovieData(movieSelect.selectedIndex, movieSelect.value);
  }
  useEffect(() => {
    populateUI();
  }, []);
  return (
    <div className="lhjvbdn">
      <div className="fbmfgbv">
        <NavBar
          title="聚点影城DOLBY(惠友十方店)"
          onClickLeft={cinemasss}
          rightText={<WapNav fontSize={20} />}
        />
      </div>
      {/* <div className="guanyingqu"> */}
      {/* <Card onClick={onClick}></Card> */}
      {/* <h6 className='guanyingquaa'>优质观影区</h6> */}
      {/* </div>   */}

      {/* <h1 className='myyingyuan' style={{fontSize:"1rem",textAlign:"center",color:"orange",marginTop:"0.2rem"}}>猫 眼 影 院</h1> */}
      {/* 电影选择  */}
      <h5
        className="tingtingting"
        style={{
          textAlign: 'center',
          fontSize: '0.5rem',
          color: 'black',
          marginTop: '0.2rem',
        }}
      >
        3号影厅
      </h5>
      <div class="movie-container">
        <label
          className="xzscinema"
          style={{ fontSize: '0.5rem', color: 'black' }}
          for="movie"
        >
          选择电影:
        </label>
        <select id="movie">
          <option value="25">那些年,我们一起追过的女孩 (￥25)</option>
          <option value="28">美人鱼 (￥28)</option>
          <option value="36">头文字D (￥36)</option>
          <option value="28">心之全噬 (￥28)</option>
          <option value="25">冰雪奇缘 (￥25)</option>
          <option value="25">蜡笔小新 (￥25)</option>
        </select>
      </div>
      {/* 座位情况描述 */}
      <ul class="showcases">
        <li>
          <div class="seatdd"></div>
          <small>普通区￥25</small>
        </li>
        <li>
          <div class="seat selectedss"></div>
          <small>特惠区￥30</small>
        </li>
        <li>
          <div class="seat occupiedss"></div>
          <small>优选区￥32.9</small>
        </li>
        <li>
          <div class="seat occupiedss"></div>
          <small>W+专享￥32.9</small>
        </li>
      </ul>
      {/* 座位详细 */}
      <div
        class="seat-container"
        onClick={(e) => {
          // 冒泡
          if (
            e.target.classList.contains('seat') &&
            !e.target.classList.contains('occupied')
          ) {
            e.target.classList.toggle('selected');
            updateSelectedCount();
          }
        }}
      >
        {/* 屏幕 */}
        <div class="screen">
          <img className="screens" src={lalabi} alt="" />
        </div>
        {/* 座位  */}
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat occupied"></div>
          <div class="seat occupied"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat occupied"></div>
          <div class="seat"></div>
          <div class="seat occupied"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
        <div class="row">
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat"></div>
          <div class="seat occupied"></div>
          <div class="seat occupied"></div>
          <div class="seat"></div>
          <div class="seat"></div>
        </div>
      </div>
      {/* 提示  */}
      {/* 座位情况描述 */}
      <ul class="showcase">
        <li>
          <div class="seat"></div>
          <small>可选</small>
        </li>
        <li>
          <div class="seat selected"></div>
          <small>已售</small>
        </li>
        <li>
          <div class="seat occupied"></div>
          <small>不可售</small>
        </li>
      </ul>
      <div className="changcisa">
        <p className="klfhnvcncxa">蜡笔小新</p>
        <p className="klfhnvcncxaas">今天 05月32日 10:32-12:05 中文3D</p>
        <p className="qiehuanchangci">
          切换场次
          <ArrowDown />
        </p>
      </div>
      <p class="text">
        您已经选中<span id="count">0</span>个座位，共计{' '}
        <span id="totalPrice">0</span> 元
      </p>
      <div className="anniuhgjv">
        <p className="qxxzwfg">请先选座</p>
      </div>
    </div>
  );
}
